<template>
	<div class="bner">
		<p>搜索排行</p>
		<div class="header">
			<div class="xbox" v-for="(item,index) in bnerList" :key="item.id">
				<span :class="{'now':4 > item.id }">
					{{index+1}}
				</span>
				. <router-link to="/">{{item.name}}</router-link>
				 <img src="../../../../public/banerimg/baner-05.png" v-if="item.id < 4" />
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name:"Bner",
	data(){
		return{
			bnerList:[
				{ id:1 , name:"云南" },
				{ id:2 , name:"牛背山" },
				{ id:3 , name:"跨年" },
				{ id:4 , name:"滑雪" },
				{ id:5 , name:"九寨沟" },
				{ id:6 , name:"武功山" },
				{ id:7 , name:"温泉" },
				{ id:8 , name:"登高" },
			],
		}
	}
}
</script>

<style scoped>
*{
	margin: 0;
	padding: 0;
}
a{
	color: #000000;
	outline: none;
}
.bner{
	
}
.bner p{
	line-height: 1rem;
	text-indent: 1.5em;
	font-size: 0.36rem;
	color: gray;
}
.header{
	margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 3.3rem;
}
.header .xbox{
	width: 50%;
    font-size: .28rem;
    margin-bottom: 0.22rem;
	text-indent: 2em;
	line-height: 0.6rem;
}
.header .xbox img{
	margin-left: 0.2rem;
	width: 0.25rem;
	height: 0.3rem;
}
.now
{
	background: url(../../../../public/banerimg/baner-06.png);
}
</style>
